<template>
	<textarea class="simditor" ref="specsEditor">{{value}}</textarea>
</template>

<script>
	import Simditor from 'simditor';

	export default {
		props: {
			specs: String
		},
		watch: {
			specs(e) {
				if (this.simditor) {
					this.simditor.setValue(e);
				} else {
					this.value = e;
				}
			}
		},
		data() {
			return {
				value: ''
			}
		},
		mounted() {
			this.initSimditor();
		},
		methods: {
			initSimditor() {
				this.simditor = new Simditor({
					textarea: this.$refs.specsEditor,
					toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul',
						'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent', 'alignment'
					],
					defaultImage: 'https://simditor.tower.im/favicon.ico',
					upload: {
						url: this.$util.baseUrl + '/goods/uploadImage',
						imageType: 'specs',
						token: this.$store.getters.token
					}
				});
			},
			returnValue() {
				return this.simditor.getValue() || '';
			}
		}
	}
</script>

<style lang="scss">
	@import "~simditor/styles/simditor";

	.simditor {

		.simditor-body {
			height: 53vh;
			overflow-y: auto;

			img {
				max-width: 99%;
			}
		}
	}
</style>
